<template>
  <div>
    <!-- unique-opened -->
    <el-scrollbar class="scrollbar-wrapper">
      <el-menu router ref="navMenu" :default-active="$route.path" :collapse="isCollapse" @select="select" @open="open" @close="close" :class="isCollapse ? 'collapse-menu' : ''">
        <!-- 一级导航 -->
        <template v-for="menu in menus">
          <!-- 一级导航：有子页面 -->
          <el-submenu v-if="menu.children && menu.children.length > 0" :id="menu.name" :key="menu.name" :index="menu.path" class="current-sub-menu-item">
            <template slot="title">
              <i :class="getIcon(menu)"></i>
              <span>{{ menu.meta.title }}</span>
            </template>
            <!-- 二级导航 -->
            <template v-for="childMenu in menu.children">
              <el-submenu v-if="childMenu.children && childMenu.children.length > 0" :id="childMenu.name" :key="childMenu.name" :index="childMenu.path" class="current-sub-menu-item">
                <template slot="title">
                  <i :class="getIcon(childMenu)"></i>
                  <span>{{ childMenu.meta.title }}</span>
                </template>
                <el-menu-item v-for="lastMenu in childMenu.children" :key="lastMenu.name" :index="lastMenu.path" class="child-sub-menu">
                  <i :class="(lastMenu.meta && lastMenu.meta.icon) || 'el-icon-document'"></i>
                  <span slot="title">{{ lastMenu.meta.title }}</span>
                </el-menu-item>
              </el-submenu>

              <el-menu-item v-else :key="childMenu.name" :id="childMenu.name" :index="childMenu.path" class="child-sub-menu-item">
                <i :class="(childMenu.meta && childMenu.meta.icon) || 'el-icon-document'"></i>
                <span slot="title">{{ childMenu.meta.title }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
          <!-- 一级导航：无子页面 -->
          <el-menu-item v-else :id="menu.name" :key="menu.name" :index="menu.path" class="current-sub-menu-item">
            <i :class="(menu.meta && menu.meta.icon) || 'el-icon-folder'"></i>
            <span slot="title">{{ menu.meta.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>
    <!-- <div
      class="collapse"
      :title="collapseTitle"
      @click="toggleCollapse"
      :class="isCollapse ? 'collapse-arrow' : ''"
    >
      <i class="arrow" :class="isCollapse? 'el-icon-caret-right': 'el-icon-caret-left'"></i>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { State, namespace, Mutation } from 'vuex-class'
import { get, cloneDeep } from 'lodash'

const vuexLogin = namespace('Login')
@Component({
  components: {}
})
export default class Index extends Vue {
  @vuexLogin.State loginUser: any
  @State routeTabs: any
  @State isCollapse: any
  @Mutation SET_ROUTE_TABS
  menus: any = {}
  opened: any[] = []

  collapseTitle: String = ''
  created() {
    this.menus = cloneDeep(get(this.$router, 'options.routes[1].children', []))
   
   /**
    * 因为根据权限显示菜单太麻烦需要改进 暂时注释 todo
    // 判断如果是业务员/业务部长/总经理 再展示发票管理和客户管理
    if (this.loginUser.roles.indexOf('系统管理员') >= 0) {
      this.menus.splice(13, this.menus.length - 13)
    } else {
      if (this.loginUser.authoritys.indexOf('客户信息管理') < 0 && this.loginUser.authoritys.indexOf('客户信息审批') < 0) {
        this.menus[9].children.splice(0, 1)
      }
      let index = 13
      if (
        this.loginUser.authoritys.indexOf('发票申请编辑') < 0 &&
        this.loginUser.authoritys.indexOf('发票申请初审') < 0 &&
        this.loginUser.authoritys.indexOf('发票申请审核') < 0 &&
        this.loginUser.authoritys.indexOf('发票申请批准') < 0
      ) {
        index = 13
      }
      this.menus.splice(index, this.menus.length - index)
    }
    */

    this.menus.splice(14, this.menus.length - 14)

    const opened = sessionStorage.getItem('opened')
    // console.log(opened)
    this.opened = opened ? opened.split(',') : []
    if (Number(sessionStorage.getItem('collapsed'))) {
      // 折叠状态
      this.$store.commit('SET_IS_COLLAPSE', true)
      this.collapseTitle = '展开'
    } else {
      // 展开状态
      this.$store.commit('SET_IS_COLLAPSE', false)
      this.collapseTitle = '折叠'
    }
  }
  mounted() {
    this.opened &&
      this.opened.forEach((x: string) => {
        // @ts-ignore
        this.$refs.navMenu.open(x)
      })
  }
  select(index: any, indexPath: any) {
    // console.log(index, indexPath)
    // console.log(this.routeTabs)
    // this.routeTabs.push(index)
    // this.SET_ROUTE_TABS(this.routeTabs)
    // console.log(this.routeTabs)
  }
  open(key: any, keyPath: any) {
    // console.log(key, keyPath)
    this.opened = keyPath
    // console.log(this.opened)
    sessionStorage.setItem('opened', this.opened.toString())
  }
  close(key: any, keyPath: any) {
    // console.log(key, keyPath)
    // console.log(this.opened)
    // let b = new Set(keyPath)
    // this.opened = this.opened.filter(x => !b.has(x))
    this.opened = this.opened.filter(x => x !== key)
    // console.log(this.opened)
    sessionStorage.setItem('opened', this.opened.toString())
  }
  getIcon(menu: any) {
    const opened = this.opened.includes(menu.path)
    return (menu.meta && menu.meta.icon) || (opened ? 'el-icon-folder-opened' : 'el-icon-folder')
  }
  toggleCollapse() {
    if (this.isCollapse) {
      sessionStorage.setItem('collapsed', '0') // 由折叠变为展开
      this.collapseTitle = '折叠'
    } else {
      sessionStorage.setItem('collapsed', '1')
      this.collapseTitle = '展开'
    }
    this.$store.commit('SET_IS_COLLAPSE', !this.isCollapse)
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
.collapse {
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: $sideBarWidth;
  margin-top: -20px;
  width: 6px;
  height: 40px;
  background: #efefef;
  border: 1px solid #e4e7ed;
  border-left: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 1001;
  i {
    position: absolute;
    top: 14px;
    left: -3px;
    font-size: 12px;
    color: #ccc;
  }
  &:hover {
    background: #ddd;
  }
  &:hover i {
    color: #666;
  }
}
.collapse-menu {
  width: $sideBarCollapseWidth;
}
.collapse-arrow {
  left: $sideBarCollapseWidth !important;
}
.scrollbar-wrapper {
  border-top: 1px solid rgb(233, 233, 233);
  margin-top: 10px;
  min-height: 100%;
  width: $sideBarWidth;
  position: fixed;
  top: $headerHeight;
  bottom: 0;
  left: 0;
  overflow-x: hidden !important;
  overflow-y: auto;
  .el-menu {
    margin-bottom: 60px;
    .el-menu-item.is-active {
      color: #fff;
      background: #e60013;
    }
  }
}
</style>
